<!DOCTYPE html>

<!--
    Test case for https://github.com/leongersen/noUiSlider/issues/987 and related.

    Test by making sure the origin element on the vertical slider does not increase the page length.
-->
<html dir="ltr">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/nouislider/dist/nouislider.css" rel="stylesheet">

    <style>
        #slider1 {
            width: 250px;
        }

        #slider2 {
            height: 250px;
        }

        .boxes {
            display: flex;
            margin: 50px auto;
        }

        .box {
            padding: 50px;
        }

        .noUi-origin {
            background: rgba(255, 0, 0, 0.5);
        }

        .noUi-horizontal .noUi-origin {
            height: 50px !important;
        }

        .noUi-vertical .noUi-origin {
            width: 50px !important;
        }

    </style>
</head>

<body>
<div class="boxes">
    <div class="box">
        <div class="slider" id="slider1"></div>
    </div>
    <div class="box">
        <div class="slider" id="slider2"></div>
    </div>
</div>

<script src="/nouislider/dist/nouislider.js"></script>

<script>
    var slider1 = document.getElementById("slider1");
    noUiSlider.create(slider1, {
        start: [5],
        step: 1,
        range: {
            min: [0],
            max: [10]
        }
    });

    var slider2 = document.getElementById("slider2");
    noUiSlider.create(slider2, {
        start: [5],
        orientation: "vertical",
        step: 1,
        range: {
            min: [0],
            max: [10]
        }
    });
</script>
</body>
</html>
